<template>
    <div>
        <!--        查询-->
        <el-form :inline="true" v-model="queryParams" class="demo-form-inline">
            <el-form-item label="供应商名称">
                <el-input v-model="queryParams.name" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 添加按钮 -->
        <el-button type="primary" @click="showAddDialog">添加供应商</el-button>
        <!-- 删除确认提示框 -->
        <!--        <delete-confirm :title="deleteTitle" :visible.sync="deleteVisible" :supporter-id="deleteId" @delete-success="reloadData"></delete-confirm>-->
        <!-- 添加/编辑供应商弹窗 -->
        <supporter-dialog @callSaveSuccess="handleSaveSuccess" :dialog-title="dialogTitle" :visible="dialogVisible"
                          @callClosed="handleAddDialogClosed" :current-supporter="currentSupporter"></supporter-dialog>
        <!-- 供应商列表 -->
        <el-table :data="supporters" stripe style="width: 100%" height="600">
<!--            可以展开-->
            <el-table-column type="expand">
                <template #default="scope">

                    <el-form label-position="right" inline label-width="100px" class="demo-table-expand">

                        <el-row>
                            <el-col :span="1" style="text-align: center;margin:auto">
                                <img :src="scope.row.logo" alt="logo" style="max-width: 100px; max-height: 100px; ">
                            </el-col>
                            <el-col :span="23">
                                <div class="info-container">
                                    <el-form-item label="地址">
                                        <span class="info">{{ scope.row.address }}</span>
                                    </el-form-item>
                                    <el-form-item label="简介">
                                        <span class="info">{{ scope.row.profile }}</span>
                                    </el-form-item>
                                    <el-form-item label="统一社会信用代码" label-width="150">
                                        <span class="info">{{ scope.row.socialCode }}</span>
                                    </el-form-item>
                                </div>
                                <div class="info-container">

                                    <el-form-item label="备注">
                                        <span class="info">{{ scope.row.comments }}</span>
                                    </el-form-item>
                                    <el-form-item label="评分">
                                        <span class="info">{{ scope.row.score }}</span>
                                    </el-form-item>
                                    <el-form-item label="等级">
                                        <span class="info">{{ scope.row.level === 1 ? '重点用户' : '普通用户' }}</span>
                                    </el-form-item>
                                    <el-form-item label="英文名称">
                                        <span class="info">{{ scope.row.nameEn }}</span>
                                    </el-form-item>

                                </div>
                                <div class="info-container">

                                    <el-form-item label="电话">
                                        <span class="info">{{ scope.row.phone }}</span>
                                    </el-form-item>
                                    <el-form-item label="邮箱地址">
                                        <span class="info">{{ scope.row.email }}</span>
                                    </el-form-item>
                                    <el-form-item label="创建时间">
                                        <span class="info">{{ scope.row.createtime }}</span>
                                    </el-form-item>
                                    <el-form-item label="供应商简介">
                                        <span class="info">{{ scope.row.profile }}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="nameZh" label="名称"></el-table-column>
            <el-table-column prop="url" label="官网地址"></el-table-column>
            <el-table-column label="等级">
                <template #default="scope">
                    <el-tag :type="scope.row.level === 1 ? 'primary' : 'info'">
                        {{ scope.row.level === 1 ? '重点供应商' : '普通供应商' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="score" label="评分"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="{ row }">
                    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                        {{ row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="180">
                <template #default="scope">
                    {{ scope.row.createtime }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteConfirm(scope.row)">{{
                        scope.row.status === 1 ? '禁用' : '启用'
                        }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="prev, pager, next"
                       :total="total"></el-pagination>
    </div>
</template>

<script>
import supporterAPI from "@/util/request-md/supporter/supporter.js";
import SupporterDialog from "@/components/widget/dialog/SupporterDialog.vue";
// import DeleteConfirm from './DeleteConfirm';

export default {
    components: {
        SupporterDialog,
        // DeleteConfirm
    },
    data() {
        return {
            queryParams: {
                name: '',
                level: '',
                score: '',
                page: 1,
                size: 10
            },
            supporters: [], // 供应商列表数据
            dialogVisible: false, // 添加/编辑对话框可见性
            deleteVisible: false, // 删除确认对话框可见性
            deleteId: null, // 要删除的供应商ID
            currentSupporter: {}, // 当前编辑的供应商数据
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            total: 0 // 总记录数
        };
    },
    computed: {
        dialogTitle() {
            return this.currentSupporter.idSupport ? '编辑供应商' : '添加供应商';
        },
        deleteTitle() {
            return this.currentSupporter.name ? `删除供应商 ${this.currentSupporter.name}` : '删除供应商';
        }
    },
    mounted() {
        this.reloadData();
    },
    methods: {
        // 加载数据
        reloadData() {
            supporterAPI.getAllSupporters(data => {
                this.supporters = data.data;
            });
        },
        // 显示添加对话框
        showAddDialog() {
            this.currentSupporter = {};
            this.dialogVisible = true;
        },
        // 显示编辑对话框
        showEditDialog(supporter) {
            this.currentSupporter = Object.assign({}, supporter);
            this.dialogVisible = true;
        },
        // 显示删除确认对话框
        deleteConfirm(data) {
            if (data.status === 0) {
                //用户已禁用，是否尝试恢复
                this.$confirm('此用户已禁用，是否尝试恢复?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除供应商
                    supporterAPI.updateSupporter(data.idSupport, {status: 1}, data => {
                        if (data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '设置成功!'
                            })
                            this.reloadData();
                        }
                    })
                })
                return;
            }
            //提示是否删除
            this.$confirm('此操作会将此用户禁用，不显示在重要的数据集合参数中, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    // 删除供应商
                    supporterAPI.deleteSupporter(data.idSupport, data => {
                        if (data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '设置成功!'
                            });
                            //刷新数据
                            this.reloadData();
                        }
                    })
                }
            );
        },
        // 处理分页变化
        handleCurrentChange(page) {
            this.currentPage = page;
            // 模拟从服务器获取数据
            this.reloadData();
        },
        handleAddDialogClosed() {
            this.dialogVisible = false;
        },
        //修改成功
        handleSaveSuccess() {
            this.reloadData();
            this.dialogVisible = false;
        },
        //查询供应商
        handleQuery() {
            supporterAPI.searchSupporters(this.queryParams.name, this.queryParams.level, this.queryParams.score, this.queryParams.page, this.queryParams.size, data => {
                if (data.code === 200) {
                    this.supporters = data.data;
                    this.total = data.data.length;
                    // console.log(data, ">>>查询结果");
                    if (this.supporters.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '没有找到符合条件的供应商!'
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            //提示查询到了多少条数据
                            message: '查询成功，共找到' + this.total + '条数据!'
                        });
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.info{
    /*margin-right: 10px;*/
    color: #909399;
}
/*.info-container{*/
/*    !*display: flex;*!*/
/*    justify-items: self-start;*/
/*}*/
</style>
